<template>
  <div class="container">
    <div class="header">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工单编号：">
          <el-input v-model="formInline.user" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select v-model="formInline.region" placeholder="请选择">
            <el-option label="待办" value="shanghai" />
            <el-option label="进行" value="beijing" />
            <el-option label="取消" value="beijing" />
            <el-option label="完成" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit"><i class="el-icon-search" />  查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container">

      <div class="role-operate">
        <el-button class="newBuild" type="warning">
          <i class="el-icon-circle-plus-outline" />
          新建</el-button>
      </div>
      <!-- 放置table组件 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <!-- 放置列 -->
        <el-table-column align="center" width="50" type="index" :index="1" prop="tableData.index" label="序号" />
        <el-table-column align="center" width="200" prop="taskCode" label="工单编号" />
        <el-table-column align="center" prop="innerCode" label="设备编号" />
        <el-table-column align="center" prop="taskType.typeName" label="工单类型" />
        <el-table-column align="center" label="工单方式">
          <template v-slot="{ row }">
            <span>  {{ row.createType === 1 ? "手动" : '自动' }} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="taskStatusTypeEntity.statusName" label="工单状态" />
        <el-table-column align="center" label="运营人员" prop="userName" />
        <el-table-column align="center" prop="updateTime" label="创建日期" />
        <el-table-column align="center" label="操作">
          <template>
            <el-button type="text">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" style="height:60px" align="middle" justify="end">

        <el-pagination layout="prev, next" />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getTaskSearch } from '@/api/task'
export default {
  name: 'Approvals',
  data() {
    return {
      tableData: [],
      input: '',
      formInline: {
        user: '',
        region: ''
      },
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false
      }
    }
  },
  async created() {
    const res = await getTaskSearch()
    console.log(res.currentPageRecords)
    console.log(res)
    this.tableData = res.currentPageRecords
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 100%;
  height: 1050px;
  padding-left: 20px;
      .header{
    display: flex;
    height: 64px;
    align-items: center;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    margin-top: 20px;
    .demo-form-inline{
      margin-top: 20px;
    }
    }
  .app-container{
      width: 100%;
      height: 900px;
      .role-operate{
        margin-bottom: 20px;
        .newBuild{
          width: 80px!important;
          height: 36px;
          padding: 0;
          background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
          border: none;
          margin-left: 18px;
          margin-top: 20px;
        }
      }
  }
}
</style>
